<template>
  <div class="regularConfig">
    <DividerTile title="校验规则" :isShow.sync="isShow"></DividerTile>
    <div v-show="isShow">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick" size="mini">
        <el-tab-pane label="正则" name="regular">
          <RegularVerify></RegularVerify>
        </el-tab-pane>
        <el-tab-pane label="函数" name="fn">
          <FnVerify></FnVerify>
        </el-tab-pane>
      </el-tabs>
      <div class="addBtn">
        <el-link type="primary" :underline="false" @click="verfiyClick(activeName)">
          <i class="el-icon-circle-plus-outline"></i>
          添加选项
        </el-link>
      </div>
    </div>
  </div>
</template>

<script>
import DividerTile from '../../../dividerTile'
import RegularVerify from './regularVerify'
import FnVerify from './fnVerify'
import { mapMutations } from 'vuex'
export default {
  name: 'regularConfig',
  components: {
    DividerTile,
    RegularVerify,
    FnVerify
  },
  data() {
    return {
      isShow: true,
      activeName: 'regular'
    }
  },
  methods: {
    ...mapMutations('pageData', ['ADDVERFIGY']),
    handleClick() {},
    verfiyClick(activeName) {
      this.ADDVERFIGY(activeName)
    }
  }
}
</script>

<style lang="scss" scoped>
.regularConfig {
  padding-right: 10px;
  .addBtn {
    margin-bottom: 20px;
  }
}
::v-deep .el-tabs__content {
  overflow: inherit;
}
</style>